<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
    />
    <title>程序调试</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/common.css" type="text/css" />
    <link rel="stylesheet" href="./css/debug.css" />
  </head>
  <body>
    <div class="box">
      <!--
        flex:称弹性盒子布局
        1 容器(container):父级元素，添加了display:flex;样式属性的容器
        2 项目(item):父级元素的直接子元素item
        3 主轴(main-axis):默认是容器的水平方向，称主轴方向
        4 垂直主轴的交叉轴(cross-axis):任何时候是和主轴方向垂直的，不一定是垂直方向，默认情况下是垂直方向
        5 项目item在容器中的默认是水平排列，默认不换行，如果放不下缩小自己进行填充，item全部是块元素
        6 容器有哪些属性：
          6-1 display:flex; 设置容器为弹性容器
          6-2 align-items:center | flex-start | flex-end | stretch... 规定item在交叉轴的排列方式
          6-3 justify-content:center | flex-start | flex-end | space-around | space-between ... 规定item在主轴的排列方式
          6-4 flex-wrap:nowrap | wrap | wrap-reverse ... 规定当前item在container中是否换行
          6-5 flex-direction:row | column ...规定主轴方向
        7 项目有哪些常规的属性
          flex:1; item分配父级容器剩余空间的分数！
       -->
      <div class="container">
        <div class="img-box">
          <img src="https://web17.oss-cn-hangzhou.aliyuncs.com/icon-1.jpg" alt="" class="img" />
        </div>
        <div class="info-box">
          <div class="name">Za姬芮新能真皙美白隔离霜 35g</div>
          <div class="opt">
            <div class="price">￥3999</div>
            <div class="opt-box">
              <span>-</span>
              <span class="num">3</span>
              <span>+</span>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="img-box">
          <img src="https://web17.oss-cn-hangzhou.aliyuncs.com/icon-2.jpg" alt="" class="img" />
        </div>
        <div class="info-box">
          <div class="name">Za姬芮新能真皙美白隔离霜 35g</div>
          <div class="opt">
            <div class="price">￥3999</div>
            <div class="opt-box">
              <span>-</span>
              <span class="num">3</span>
              <span>+</span>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="img-box">
          <img src="https://web17.oss-cn-hangzhou.aliyuncs.com/icon-3.jpg" alt="" class="img" />
        </div>
        <div class="info-box">
          <div class="name">Za姬芮新能真皙美白隔离霜 35g</div>
          <div class="opt">
            <div class="price">￥3999</div>
            <div class="opt-box">
              <span>-</span>
              <span class="num">3</span>
              <span>+</span>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="img-box">
          <img src="https://web17.oss-cn-hangzhou.aliyuncs.com/icon-4.jpg" alt="" class="img" />
        </div>
        <div class="info-box">
          <div class="name">Za姬芮新能真皙美白隔离霜 35g</div>
          <div class="opt">
            <div class="price">￥3999</div>
            <div class="opt-box">
              <span>-</span>
              <span class="num">3</span>
              <span>+</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <!-- <script src="./js/debug.js"></script> -->
</html>
